<template>
  <div class="early-warning-record-box">
    <el-form
      ref="form"
      :model="formData"
      :disabled="popConfig.disabled"
      :rules="rules"
      label-width="110px"
    >
      <template v-for="(item, index) in formList">
        <el-form-item
          :key="`${item.prop}${index}`"
          :style="item.itemStyle || {}"
          :label="item.name"
          :prop="item.prop"
          :class="item.itemClass"
        >
          <component
            :is="item.componentType || 'el-input'"
            v-if="item.prop"
            v-model="formData[item.prop]"
            :clearable="true"
            :class="item.class"
            v-bind="item.attrConfig || {}"
            @change="handlerSelectData(item)"
          >
            <template v-for="option in item.optionList">
              <el-option
                :key="option.code"
                :label="option.name"
                :value="option.code"
              />
            </template>
          </component>
        </el-form-item>
      </template>
      <!-- 信息状态 -->
      <div class="information-state">
        <el-form-item label="信息状态详情:"></el-form-item>
        <TableCard
          :cardData="cardData"
          @handleCurrentChange="handleCurrentChange"
        ></TableCard>
      </div>
    </el-form>
  </div>
</template>

<script>
import { dictMixin } from '@/mixin/dict'
import TableCard from '@/components/TableCard'
import roomApi from '@/api/apis/sceneRoom'
import api from '@/api/apis/carbonEmissionManage'
import {
  parseSceneData,
  parseToSceneInfo,
  sceneInfoToParam
} from '@/utils/scene-data'

export default {
  name: 'OperateWarningManage',
  mixins: [dictMixin],
  components: {
    TableCard
  },
  props: {
    // 请求参数
    requestParams: {
      type: Object,
      default: () => ({})
    },
    // 弹窗数据
    popData: {
      type: Object,
      default: () => ({})
    },
    // 弹窗配置
    popConfig: {
      type: Object,
      default: () => ({})
    },
    // 弹窗取消
    close: {
      type: Boolean,
      default: false
    },
    // 弹窗确认
    confirm: {
      type: Boolean,
      default: false
    }
  },
  data() {
    return {
      formData: {
        label: '',
        value: '',
        remark: ''
      },
      formList: [
        {
          name: '所属项目',
          prop: 'sceneProjectId',
          componentType: 'el-select',
          optionList: [],
          selectPath: 'commonSelected',
          selectParams: {
            code: 'SceneProjectSelected'
          },
          attrConfig: {
            placeholder: '请选择所属项目',
            options: []
          },
          dataProp: {
            dataType: 'resData',
            nameProp: 'label',
            codeProp: 'value'
          },
          selectStyle: { width: '100%' }
        },
        {
          name: '计量条件',
          prop: 'meterCondition',
          componentType: 'el-select',
          optionList: [],
          selectPath: 'dictList',
          selectParams: {
            codeList: ['ecp-admin.earlyWarningRecord.meterCondition']
          },
          attrConfig: {
            placeholder: '请选择计量条件',
            options: []
          },
          dataProp: {
            keyProp: 'ecp-admin.earlyWarningRecord.meterCondition',
            nameProp: 'label',
            codeProp: 'value'
          },
          style: { width: '100%' }
        },
        {
          name: '所属场景',
          prop: 'sceneInfo',
          componentType: 'el-cascader',
          attrConfig: {
            placeholder: '请选择所属场景',
            props: {
              checkStrictly: true
            },
            options: []
          }
        },
        {
          name: '预警级别',
          prop: 'thresholdLevel',
          componentType: 'el-select',
          optionList: [],
          selectPath: 'dictList',
          selectParams: {
            codeList: ['ecp-admin.earlyWarningRecord.thresholdLevel']
          },
          attrConfig: {
            placeholder: '请选择预警级别',
            options: []
          },
          dataProp: {
            keyProp: 'ecp-admin.earlyWarningRecord.thresholdLevel',
            nameProp: 'label',
            codeProp: 'value'
          },
          style: { width: '100%' }
        },
        // {
        //   name: '能源类型',
        //   prop: 'energyTypeId',
        //   componentType: 'el-select',
        //   optionList: [],
        //   selectPath: 'commonSelected',
        //   selectParams: {
        //     code: 'EnergyConsumptionTypeSelected'
        //   },
        //   attrConfig: {
        //     placeholder: '请选择能源类型',
        //     options: []
        //   },
        //   dataProp: {
        //     dataType: 'resData',
        //     nameProp: 'label',
        //     codeProp: 'value'
        //   },
        //   selectStyle: { width: '100%' }
        // },
        {
          name: '预警阈值',
          prop: 'thresholdValue',
          attrConfig: { placeholder: '请输入计量数值' }
        },
        // {
        //   name: '关联设备',
        //   prop: 'meterDeviceId',
        //   componentType: 'el-select',
        //   optionList: [],
        //   attrConfig: {
        //     placeholder: '请选择关联设备',
        //     options: []
        //   },
        //   dataProp: {
        //     dataType: 'resData',
        //     nameProp: 'label',
        //     codeProp: 'value'
        //   },
        //   selectStyle: { width: '100%' }
        // },
        {
          name: '预警值',
          prop: 'meterValue',
          attrConfig: { placeholder: '请输入阈值数值' }
        },
        {
          name: '预警时间',
          prop: 'createTm'
        }
      ],
      earlyWarningRecordId: '',
      cardData: {
        head: [
          {
            prop: 'userName',
            name: '用户',
            minWidth: 110
          },
          {
            prop: 'statusName',
            name: '状态',
            minWidth: 110
          },
          {
            prop: 'readTime',
            name: '查看时间',
            minWidth: 110
          }
        ],
        body: [],
        page: 1,
        limit: 10,
        total: 0,
        pageSizes: [3]
      }
    }
  },
  computed: {
    rules() {
      return {}
    }
  },
  watch: {
    popData: {
      handler(data) {
        this.formList.forEach((e) => {
          if (e.prop === 'thresholdValue') {
            this.$set(
              this.formData,
              e.prop,
              data['judgeRuleName'] + data[e.prop]
            )
          } else {
            this.$set(this.formData, e.prop, data[e.prop])
          }
        })

        this.$set(this.formData, 'id', data.id)
        const sceneInfo = parseToSceneInfo(data)
        this.formData.sceneInfo = sceneInfo
        if (data.sceneProjectId) {
          // 查询场景选择的数据
          this.getRoomList(data.sceneProjectId)
          // 查询设备的数据
          this.getDeviceList(sceneInfo)
        }
        this.earlyWarningRecordId = data.id
        this.detailQueryPage()
      },
      deep: true,
      immediate: true
    },
    confirm() {
      const params = {
        ...(this.formData || {})
      }
      this.submit(params)
    }
  },
  methods: {
    /**
     * change事件
     */
    handlerSelectData(config) {
      const Ref = this.$refs[config.prop]
      if (Ref && config.isClosePop) {
        Ref.dropDownVisible = false
      }
    },

    handleCurrentChange({ limit, page }) {
      this.cardData.limit = limit
      this.cardData.page = page
      this.detailQueryPage()
    },
    /**
     * 获取信息状态详情列表
     */
    async detailQueryPage() {
      const res = await api.detailList({
        id: this.earlyWarningRecordId
      })
      this.cardData.body = res.data.pushUsers
      this.cardData.total = res.data.pushUsers.length
    },
    /**
     * 获取空间列表
     * @param sceneProjectId
     */
    async getRoomList(sceneProjectId) {
      const res = await roomApi.queryRoomList({
        sceneProjectId,
        sortColumn: 'floorName',
        sortOrder: 'asc'
      })
      const roomList = parseSceneData(res.data)
      const item = this.formList[2]
      item.attrConfig.options = roomList
      this.$set(this.formList, 2, { ...item })
    },
    /**
     * 获取设备列表
     */
    async getDeviceList(sceneInfo, reset = false) {
      const params = sceneInfoToParam(sceneInfo)
      params.sceneProjectId = this.formData.sceneProjectId
      const res = await this.$api.commonSelected({
        code: 'MeterDeviceSelected',
        param: JSON.stringify(params)
      })
      const item = this.formList[6]
      item.optionList = res.data.map((device) => {
        device.name = device.label
        device.code = device.value
        return device
      })
      if (reset) {
        this.formData.meterDeviceId = ''
      }
      this.$set(this.formList, 6, { ...item })
    }
  }
}
</script>

<style lang="scss" scoped>
.early-warning-record-box {
  color: #333;
  padding: 0 20px;

  ::v-deep .el-form {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;

    .el-form-item {
      width: calc(50% - 10px);
      margin-bottom: 10px;

      &.width100p {
        width: 100%;
      }

      .el-form-item__label {
        color: #666;
        font-size: 14px;
      }

      &.form-sub-title {
        width: 100%;

        .el-form-item__label {
          display: flex;
          align-items: center;
          justify-content: flex-start;
          font-weight: bold;
          color: #333;
          font-size: 16px;
          line-height: 1;

          &::before {
            content: '';
            display: inline-block;
            width: 4px;
            height: 15px;
            background-color: #00858d;
            margin-right: 5px;
          }
        }
      }
    }

    .el-select,
    .el-cascader {
      width: 100%;
    }
  }

  .information-state {
    width: 100%;
    margin: 0 0 20px 0;
  }

  ::v-deep .el-table__body-wrapper {
    height: 150px;
  }

  ::v-deep .no-data-box {
    width: 180px;
    height: 133px;
  }

  ::v-deep .el-pagination {
    justify-content: center;
  }
}
</style>
